import React, { Component } from 'react'
import { Carousel } from "antd-mobile"
import "./index.less"
import PropTypes from 'prop-types'
export default class MyCarousel extends Component {
    static propTypes = {
        swipers: PropTypes.array
    }
    constructor(){
        super();
        this.state = {
            imgHeight:170
        }
    }
    render() {
        return (
            <div className="my-carousel" onClick={this.props.enterSearch}>
                <Carousel
                    autoplay={false}
                    infinite
                >
                    {
                        this.props.swipers.map((el,index)=>{
                            return(
                                <img className="pic"
                                height={this.state.imgHeight}
                                src={el.picUrl}
                                key={el.id}
                                onLoad={
                                    ()=>{
                                        this.setState({ imgHeight: 'auto' }); 
                                    }
                                }
                                />
                            )
                        })
                    }
                </Carousel>
            </div>
        )
    }
}
